import { Component, OnInit, Input } from '@angular/core';
// import * as echarts from 'echarts/core';
import { HttpService } from '../../shared/service/http.service';
import { AppGlobalService } from '../../shared/service/app-global.service';
import { forEach } from '@angular/router/src/utils/collection';
declare let echarts: any;
@Component({
  selector: 'app-browsing-volume',
  templateUrl: './browsing-volume.component.html',
  styleUrls: ['./browsing-volume.component.scss'],
})
export class BrowsingVolumeComponent implements OnInit {
  @Input() tagData: any;
  // tslint:disable-next-line:max-line-length
  allData: any = [];
  data1: any = [];
  xAxisData: any = [];
  
  // oneDay = 24 * 3600 * 1000;
  options1 = {};
  serviceNumber = this.appGlobalService.getNowFormatDateYYYYMMDD().substring(8, 10);
  serviceStartTime = this.appGlobalService.getNowFormatDateYYYYMMDD();
  currentDataIndex = 0;
  nowDate = '';
  ngOnInit() {
    this.allData = this.tagData.data.series.data;
    this.serviceNumber = this.tagData.data.serviceNumber ? this.tagData.data.serviceNumber : this.serviceNumber;
    this.serviceStartTime = this.tagData.data.serviceStartTime ? this.tagData.data.serviceStartTime : this.serviceStartTime;
  }
  constructor(private httpService: HttpService, private appGlobalService: AppGlobalService) {
  }
  // tslint:disable-next-line:use-life-cycle-interface
  ngAfterViewInit(): void {
    this.allData = this.tagData.data.series.data;
    const container = document.getElementById('browsingEchars');
    if (this.allData.length > 0) {
      this.options1 = {
        title: {
          text: '推广受众量',
          padding: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold,PingFang SC'
          }
        },
        grid: {
          right: '3%',
          left: '12%'
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          backgroundColor: 'transparent', // rgba(255,99,20,0.94)
          textStyle: {
            color: 'rgba(255,255,255,1)'
          },
          formatter: (params) => {
            params = params[0];
            // tslint:disable-next-line:max-line-length
            const lblStringNew = "<div align='center' style='line-height:1.54rem;height: 1.54rem;background:rgba(255,99,20,1);box-shadow:0rem 0.13rem 0.31rem 0rem rgba(39,40,46,0.1);border-radius:1.41rem;opacity:0.94;padding-left:0.81rem;padding-right:0.81rem;'>"
              + "<p>" + params.value + "</p>"
              + "<img src='assets/img/map/map_arrow_nor@3x.png' style='width:8px;margin-top: -1.39rem;'></img></div>";
            return lblStringNew; // params.value;
          },
          position: (point, params, dom, rect, size) => {
            // 固定在顶部
            return [point[0], '50%'];
          }
          //  position: 'inside'
          //  (pt) => {
          //   return [pt[0], 130];
          // },
          // axisPointer: {
          //   // 坐标轴指示器，坐标轴触发有效
          //   type: "line", // 默认为直线，可选为：'line' | 'shadow'
          //   label: 'cross',
          //   show: true
          // },
          // tslint:disable-next-line:max-line-length
          // extraCssText: 'box-shadow:0rem 0.13rem 0.31rem 0rem rgba(255,99,20,0.2);border-radius:1.41rem;opacity:0.94;', // padding-left:0.81rem;padding-right:0.81rem;
        },
        xAxis: {
          axisLabel: {
            fontWeight: 300,
            color: 'rgba(133,136,148,1)', // rgba(133,136,148,1)
            fontFamily: 'SFProText-Light',
            formatter: (value, index) => {
              const date = new Date(value);
              const texts = [(date.getMonth() + 1), date.getDate()];
              return texts.join('-');
            }
          },
          axisLine: {
            show: false
          },
          axisPointer: {
            lineStyle: {
              color: 'rgba(255,99,20,0.5)',
              width: 1
            }
          },
          axisTick: { // x坐标轴刻度线的样式
            lineStyle: {
              color: 'transparent'
            }
          },
          data: this.allData.map((item) => {
            return item[0];
          }),

        },
        yAxis: {
          interval: 1500,
          min: 0,
          max: 6000,
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(235,235,237,1)'
            }
          }, axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          }, axisLabel: {
            fontWeight: 300,
            color: 'rgba(133,136,148,1)',
            fontFamily: 'SFProText-Light',
          }
        },
        dataZoom: [{
          // tslint:disable-next-line:max-line-length
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '100%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          startValue: this.getDataZoomStartValueAndEndValue(0),
          endValue: this.getDataZoomStartValueAndEndValue(1)
        }, {
          type: 'inside'
        }],
        series: {
          name: '推广受众量',
          type: 'line',
          smooth: false,
          symbolSize: 6,
          showSymbol: true,
          symbol: 'emptyCircle', // emptyCircle
          hoverAnimation: true,
          color: ['#FF6314'],
          itemStyle: {
            color: (params) => {
              if (params.value > 0) {
                return '#FF6314';
              } else {
                return '#FF6314';
              }
            },
            emphasis: {
              color: '#FF6314'// hover拐点颜色定义
            }
          },
          lineStyle: {
            color: '#FF6314', // 设置折线的颜色
          },
          data: this.allData.map((item) => {
            return item[1];
          }),
        }
      };
      const ec = echarts as any;
      // tslint:disable-next-line:prefer-const
      let chart = ec.init(container);
      chart.setOption(this.options1);
      const previous = document.getElementById('ec_previous');
      const next = document.getElementById('ec_next');
      setTimeout(() => {
        chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,  // 显示第几个series
          dataIndex: this.currentDataIndex, // 显示第几个数据
          position: (pos, params, dom, rect, size) => {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            // const obj = { top: '50%' };
            // obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = '80%';
            // return obj;
            return [pos[0], '50%'];
          }
        });
      }, 500);
      chart.on('dataZoom', (params) => {
        if (params.batch[0].start <= 10 && this.tagData.data.submit.content.preMonth !== 0) { // previous month
          previous.style.display = "block";
          next.style.display = "none";
        } else if (params.batch[0].end >= 90 && this.tagData.data.submit.content.nextMonth !== 0) {
          previous.style.display = "none";
          next.style.display = "block";
        } else {
          previous.style.display = "none";
          next.style.display = "none";
        }
      });
      if (this.tagData.data.submit.content.preMonth !== 0) {
        previous.style.display = "block";
      }
      if (this.tagData.data.submit.content.nextMonth !== 0) {
        next.style.display = "block";
      }
    } else {
      container.style.display = "none";
    }
  }
  refreshData(type) {
    const that = this;
    console.log('msg-----> getPrevious ');
    let tmpData = [];
    // tslint:disable-next-line:max-line-length
    const cparams = { content: { month: type === 1 ? that.tagData.data.submit.content.preMonth : that.tagData.data.submit.content.nextMonth, opportunity_id: that.tagData.data.submit.content.opportunity_id }, id: that.tagData.data.submit.id, sessionId: localStorage.getItem('sessionId') };
    that.httpService.post('application/submit', cparams, (pres) => {
      if (pres) {
        that.tagData.data.series.data = [];
        that.tagData.data.submit.content.preMonth = pres.data.submit.content.preMonth;
        that.tagData.data.submit.content.nextMonth = pres.data.submit.content.nextMonth;
        that.tagData.data.submit.content.opportunity_id = pres.data.submit.content.opportunity_id;
        that.tagData.data.series = pres.data.series;
        tmpData = pres.data.series.data;
        const ec = echarts as any;
        const previous = document.getElementById('ec_previous');
        const next = document.getElementById('ec_next');
        const container = document.getElementById('browsingEchars');
        const chart = ec.init(container);
        if (this.tagData.data.submit.content.preMonth === 0) {
          previous.style.display = "none";
        }
        if (this.tagData.data.submit.content.nextMonth === 0) {
          next.style.display = "none";
        }
        chart.on('dataZoom', (params) => {
          if (params.batch[0].start <= 10 && this.tagData.data.submit.content.preMonth !== 0) { // previous month
            previous.style.display = "block";
            next.style.display = "none";
          } else if (params.batch[0].end >= 90 && this.tagData.data.submit.content.nextMonth !== 0) {
            previous.style.display = "none";
            next.style.display = "block";
          } else {
            previous.style.display = "none";
            next.style.display = "none";
          }
        });
        if (this.tagData.data.submit.content.preMonth !== 0) {
          previous.style.display = "block";
        }
        if (this.tagData.data.submit.content.nextMonth !== 0) {
          next.style.display = "block";
        }
        chart.setOption(
          {
            title: {
              text: '推广受众量'
            },
            tooltip: {
              trigger: 'axis',
              backgroundColor: 'transparent',
              textStyle: {
                color: 'rgba(255,255,255,1)'
              },
              formatter: (params) => {
                params = params[0];
                // tslint:disable-next-line:max-line-length
                const lblStringNew = "<div align='center' style='line-height:1.54rem;height: 1.54rem;background:rgba(255,99,20,1);box-shadow:0rem 0.13rem 0.31rem 0rem rgba(39,40,46,0.1);border-radius:1.41rem;opacity:0.94;padding-left:0.81rem;padding-right:0.81rem;'>"
                  + "<p>" + params.value + "</p>"
                  + "<img src='assets/img/map/map_arrow_nor@3x.png' style='width:8px;margin-top: -1.39rem;'></img></div>";
                return lblStringNew; // params.value;
                // return params.value;
              },
              position: (pos, params, dom, rect, size) => {
                return [pos[0], '50%'];
              }
              // tslint:disable-next-line:max-line-length
              // extraCssText: 'box-shadow:0rem 0.13rem 0.31rem 0rem rgba(255,99,20,0.2);border-radius:1.41rem;opacity:0.94;padding-left:0.81rem;padding-right:0.81rem;',
            },
            xAxis: {
              axisLabel: {
                fontWeight: 300,
                color: 'rgba(133,136,148,1)',
                fontFamily: 'SFProText-Light',
                formatter: (value, index) => {
                  const date = new Date(value);
                  const texts = [(date.getMonth() + 1), date.getDate()];
                  return texts.join('-');
                }
              },
              axisLine: {
                show: false
                // lineStyle: {
                //   color: 'transparent'
                // }
              },
              axisPointer: {
                lineStyle: {
                  color: 'rgba(255,99,20,0.5)',
                  width: 1
                }
              },
              axisTick: { // x坐标轴刻度线的样式
                lineStyle: {
                  color: 'transparent'
                }
              },
              data: tmpData.map((item) => {
                return item[0];
              })
            },
            yAxis: {
              interval: 1500,
              min: 0,
              max: 6000,
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgba(235,235,237,1)'
                }
              }, axisLine: {
                lineStyle: {
                  color: 'transparent'
                }
              }, axisLabel: {
                fontWeight: 300,
                color: 'rgba(133,136,148,1)',
                fontFamily: 'SFProText-Light',
              }
            },
            dataZoom: [{
              // tslint:disable-next-line:max-line-length
              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '100%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              startValue: tmpData.length > 0 ? tmpData[0][0] : '',
              // tslint:disable-next-line:max-line-length
              endValue: tmpData.length > 0 ? tmpData.length > 5 ? tmpData[4][0] : tmpData[tmpData.length - 1][0] : ''
            }, {
              type: 'inside',
            }],
            series: {
              name: '推广受众量',
              type: 'line',
              smooth: true,
              symbolSize: 6,
              showSymbol: true,
              symbol: 'emptyCircle', // emptyCircle
              hoverAnimation: true,
              color: ['#FF6314'],
              itemStyle: {
                color: (params) => {
                  if (params.value > 0) {
                    return '#FF6314';
                  } else {
                    return '#FF6314';
                  }
                },
                emphasis: {
                  color: '#FF6314'// hover拐点颜色定义
                }
              },
              lineStyle: {
                color: '#FF6314', // 设置折线的颜色
              },
              data: tmpData.map((item) => {
                return item[1];
              }),
            }
          }
        );
      }
    });
  }
  getDataZoomStartValueAndEndValue(type) {
    let startValue = '';
    let endValue = '';
    const totalIndex = this.allData.length;
    const currentDate = this.appGlobalService.getNowFormatDateYYYYMMDD();
    // tslint:disable-next-line:prefer-for-of
    for (let index = 0; index < this.allData.length; index++) {
      const element = this.allData[index];
      if (currentDate === element[0]) {
        this.currentDataIndex = index;
      }
    }
    if ((this.currentDataIndex + 3) > totalIndex) {
      if ((this.currentDataIndex + 2) > totalIndex) {
        if ((this.currentDataIndex + 1) === totalIndex) {
          endValue = this.allData[this.currentDataIndex][0];
          startValue = this.allData[this.currentDataIndex - 4][0];
        }
      } else {
        endValue = this.allData[this.currentDataIndex + 1][0];
        startValue = this.allData[this.currentDataIndex - 3][0];
      }
    } else if ((this.currentDataIndex - 2) < 0) {
      if ((this.currentDataIndex - 1) < 0) {
        if ((this.currentDataIndex) === 0) {
          startValue = this.allData[this.currentDataIndex][0];
          endValue = this.allData[this.currentDataIndex + 4][0];
        }
      } else {
        startValue = this.allData[this.currentDataIndex - 1][0];
        endValue = this.allData[this.currentDataIndex + 3][0];
      }
    } else {
      endValue = this.allData[this.currentDataIndex + 2][0];
      startValue = this.allData[this.currentDataIndex - 2][0];
    }
    if (type === 0) {
      return startValue;
    } else {
      return endValue;
    }
  }



}
